<template>
    <div style="background: #fdf8ff">
        <el-descriptions column=1 style="margin-left: 20px" title="订单详情" >
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="订单号">{{row.productorderCode}}</el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="所属用户">
                <el-link @click="goUser(row.productOrderUser)" type="primary">
                    {{row.productOrderUser.userNickname}}
                </el-link>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider> <!--分割线隔开-->

        <el-descriptions column=1 style="margin-left: 20px" title="基本信息">
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="收货人">{{row.productorderReceiver}}</el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="收货地址">
                {{row.productOrderAddress.addressName}}{{row.productorderDetailAddress}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="邮政编码">{{row.productorderPost}}</el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="联系电话">{{row.productorderMobile}}</el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <div> <span style="margin-left: -1160px"><b>订单状态</b></span>
            <el-steps :active="active" process-status="wait" finish-status="success" align-center="true"style="margin-top: 30px">
                <el-step title="买家付款"></el-step>
                <el-step title="卖家发货"></el-step>
                <el-step title="买家收货"></el-step>
                <el-step title="交易成功"></el-step>
                <el-step title="交易关闭"></el-step>
            </el-steps>
        </div>

        <el-divider></el-divider>

        <div> <span style="margin-left: -1130px"><b>产品订单信息</b></span>
            <el-table border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}"
                      :data="row.productOrderItemList" style="width: 90%;margin-left: 60px;margin-top: 30px" max-height="300">
                <el-table-column align="center" fixed prop="" label="产品图片" width="200">
                    <template slot-scope="scope">
                        <img src="require('@/assets/img/productPictures/'+scope.row.productRoughPicture)" alt="" width="60px" height="60px">
                    </template>  <!--把图片导入后把src换为 :src就好了-->
                </el-table-column>
                <el-table-column align="center"  prop="productOrderItemProduct.productName" label="产品名称" width="200"></el-table-column>
                <el-table-column align="center"  prop="productorderitemPrice" label="产品单价" width="150"></el-table-column>
                <el-table-column align="center"  prop="productorderitemNumber" label="购买数量" width="150"></el-table-column>
                <el-table-column align="center"  prop="totalPrice" label="总计价格" width="150"></el-table-column>
                <el-table-column align="center"  prop="productorderitemUserMessage" label="用户备注" width="120"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-link @click="goProduct(scope.row.productOrderItemProduct.productId)" type="primary">详情
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <el-divider></el-divider>

        <el-descriptions column=1 style="margin-left: 20px" title="流程时间">
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" v-if="row.productorderPayDate != null && row.productorderPayDate != '' "
                                  label="支付日期">
                {{row.productorderPayDate}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" v-if="row.productorderDeliveryDate != null && row.productorderDeliveryDate != '' "
                                  label="发货日期">
                {{row.productorderDeliveryDate}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" v-if="row.productorderConfirmDate != null && row.productorderConfirmDate != '' "
                                  label="收货日期">
                {{row.productorderConfirmDate}}
            </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <el-button @click="changeStatus(row.productorderCode)" v-show="active == 1" type="primary" round>确认发货</el-button>
    </div>
</template>

<script>
    export default {
        name: "orderDetail",
        data() {
            return {
                active: '',
                row: {           //订单表里传过来的一行订单数据
                    productOrderAddress: {},
                    productOrderUser: {},
                    productOrderItemList: [
                        {
                            totalPrice: '',    //将总价算出来放入这里
                            productRoughPicture:'',    //新加一个产品概括图片，将查到的该产品一张概括图片存进去
                            productOrderItemProduct: {
                            },
                            productOrderItemUser: {}
                        }
                    ]
                }
            }
        },
        methods: {
            getRowData() {   //初始化该组件的数据
                this.row = this.$route.params.rowData
                for (let i = 0; i < this.row.productOrderItemList.length; i++) {   //将总价计算出来放入totalPrice里
                    this.row.productOrderItemList[i].totalPrice = (this.row.productOrderItemList[i].productorderitemPrice) * (this.row.productOrderItemList[i].productorderitemNumber)
                }

                for (let i = 0; i <this.row.productOrderItemList.length; i++) {   //给每个产品订单加一张产品概括图片
                    this.$axios.get(`/api/productImage/${this.row.productOrderItemList[i].productOrderItemProduct.productId}/0`).then(res => {
                        this.row.productOrderItemList[i].productRoughPicture = res.data[0]
                        console.log("概述图片集合",this.imageRoughUrl)
                    })
                }

                switch (this.row.productorderStatus) {   //设置订单状态的进度条
                    case '!!代付款!!' :
                        this.active = 1;
                        break;
                    case '--代发货--' :
                        this.active = 2;
                        break;
                    case '~~待收货~~' :
                        this.active = 3;
                        break;
                    case '交易成功 √ √' :
                        this.active = 4;
                        break;
                    case '交易关闭' :
                        this.active = 5;
                        break;
                }
                console.log("订单详情", this.row)
                console.log("订单状态", this.active)
            },
            goUser(userData) {             //将用户id传过去，进入该用户的界面
                switch (userData.userGender) {
                    case 0 :
                        userData.userGender = '男♂';
                        break;
                    case 1 :
                        userData.userGender = '女♀';
                        break;
                }
                this.$router.push({name: "UserDetail", params: {userData:userData}})
            },
            goProduct(productId) {            //将产品id传过去，进入该产品的界面
                this.$router.push({name: 'ProductDetail', params: {productId: productId}})
            },
            changeStatus(productorderCode) {
                this.$confirm("确认发货吗?", "发货提示", {
                    confirmButtonText: '确认发货',
                    cancelButtonText: '再看看',
                    type: 'danger'
                }).then(() => {
                    this.$axios.put(`/api/productOrder/updateStatus/${productorderCode}`).then(res => {
                        if (res.data == 1) {
                            this.$message({
                                showClose: true,
                                type: "success",
                                message: "发货成功",
                                center: true
                            })
                        } else {
                            this.$message({
                                showClose: true,
                                type: "error",
                                message: "发货失败",
                                center: true
                            })
                        }
                    })
                })

            },

        },
            created() {       //先渲染数据
                this.getRowData()
            },
        }
</script>

<style scoped>

</style>
